<template>
  <div class="total">
      <ul  v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="30">
        <li v-for="(item,index) in list">
            <div>{{index + 1}}</div>
            <div><img :src="item.image"></div>
            <div>
              <h4>{{item.name}}</h4>
              <p :style="{background:item.labelList.color}" >{{item.labelList.name}}</p>
              <p>{{item.description}}</p>
            </div>
            <a href="javascript:;">开始</a>
        </li>
        <mt-spinner v-if="flag" color="#26a2ff" :size="35" type="triple-bounce"></mt-spinner> 
      </ul>
  </div> 
</template>

<script>
export default {
  name: 'total',
  data () {
    return {
      flag:true,
      list:[
          {"id":"100","name":"画圆圈","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20141222121421_798.jpg","description":"动手画个圆，你行吗？","screen":"竖屏","divider":"100","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"368","name":"英雄难过棍子关2","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150614173922_991.png","description":"自古英雄难过美人关,这次是英雄难过棍子关了！使用神奇的棍子跨过高台，看看你能走多远！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"295","name":"胸口碎大石","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150403115426_276.jpg","description":"小心点，我特么要吐血了。","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"80","name":"英雄难过棍子关","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611143728_164.png","description":"APP Store免费榜排行第一","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"343","name":"2048恋爱版","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150614154250_670.jpg","description":"从搭讪到表白，2048教你如何谈恋爱！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"239","name":"酒后别开车","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611160815_643.jpg","description":"     想知道酒后开车是什么感觉吗？试试就知道","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"95","name":"刀客","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611153007_305.jpg","description":"刀为凶器，勇者御之！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"273","name":"放开那女孩","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611173740_551.jpg","description":"帮助你心爱的她回家","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"575","name":"是男人就去优衣库","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150715225730_758.jpg","description":"一库，一库，优衣库~","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
          {"id":"406","name":"甜饼谜题","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150615133711_900.png","description":"怎么让小怪物吃到甜饼呢？","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}}
          ],
         list2:[
            {"id":"469","name":"让我成长吧","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150708224605_605.png","description":"来浇灌我吧，助我快快成长","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"337","name":"向左向右","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150613160700_804.jpg","description":"向左还是向右，这是一个问题。选错了，就是坠落悬崖","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"512","name":"栀子花开","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150630232547_100.jpg","description":"栀子花开的道路阶梯旁，你和我初次相遇。寻着你的足迹，我不曾停下脚步～","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"521","name":"沿着线走","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701214610_186.jpg","description":"越界就是死！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"105","name":"指环王","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611155219_119.png","description":"能坚持10秒钟就是牛人！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"463","name":"再次起飞","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701225434_314.jpg","description":"驾驶飞船，穿越障碍，永不言弃！","screen":"横屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"517","name":"放学别走","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701211408_487.png","description":"我是要成为登顶铃兰的男人！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},{"id":"311","name":"街头篮球","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150612103807_496.jpg","description":"你玩街头篮球吗？快点来投几个看看！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"277","name":"见缝插针","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611175844_141.png","description":"风靡全球的虐心游戏","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},{"id":"458","name":"算术题","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701230228_224.jpg","description":"你小学数学及格了吗？","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"362","name":"动物连线","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150425122217_502.png","description":"超可爱的画风，加上创新的连连看玩法，让人完全停不下来啊！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"94","name":"盗梦空间","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611152604_147.jpg","description":"再不来玩，小李就要被压死了！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"477","name":"upup!","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150624134744_585.png","description":"好好学习，天天向上！你能跳多高？","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"79","name":"气球砰砰砰","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20141128204418_189.jpeg","description":"即刻体验捏爆快感！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"405","name":"水滴四溅","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150615131038_963.png","description":"用有限的水滴，制造无限的水花绽放！","screen":"横屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"242","name":"闪躲高手","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150611161148_678.png","description":"枪林弹雨浑不怕，身残志坚搞腐败","screen":"竖屏","divider":"100","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"524","name":"愚公移山","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701233800_138.png","description":"和女神多多生子孙完成愚公移山的宏愿吧","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"挂机放置","color":"#DA92E9"}},
            {"id":"526","name":"美人心计","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150701235605_719.png","description":"放课后日在校园中","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"1","labelList":{"name":"益智休闲","color":"#07C8A8"}},
            {"id":"467","name":"神庙探险","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150626232750_466.png","description":"可以射击的横版跑酷游戏","screen":"横屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}},
            {"id":"274","name":"1010方块","image":"http:\/\/imagesrcdola.b0.upaiyun.com\/0\/20150612103343_422.png","description":"经典俄罗斯方块创新玩法，还不赶快试试！","screen":"竖屏","divider":"1","ver":"1","scoreType":"1","payable":"0","labelList":{"name":"创意游戏","color":"#07C8A8"}}
         ] 
    }
  },
  methods:{
    loadMore() {
      if (this.loading) {
        this.flag = false;
        return false
      }
      this.loading = false;
      
      setTimeout(() => {
        
          this.list= this.list.concat(this.list2);
        
        this.loading = true;
        
      }, 2500);
    }
  },
  mounted(){

   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .total{
    width: 100%;
  }
  ul{
    text-align: center;
  }
  ul,li{
    width: 100%;
  }
  li{
    box-sizing: border-box;
    padding-left: 0.1rem;
    display: flex;
    height: 0.75rem;
    align-items: center;
  }
  li div{
    height: 100%;
    display: flex;
  }
  li div:nth-of-type(1){
    text-align: center;
    line-height: 0.74rem;
    color: #555;
    width: 0.2rem;
  }
  li div:nth-of-type(2) img{
      height: 0.51rem;
      width: 0.51rem;
      justify-content: center;
      align-self: center;
  }
  li div:nth-of-type(3){
    display: flex;
    font-size: 12px;
    box-sizing: border-box;
    padding: 0.14rem;
    flex-direction: column;
    align-items: left;
    width: 1.8rem;
    justify-content: space-around;
    text-align: left;
  }
  li div:nth-of-type(3) p:first-of-type{
    color: #fff;
  }
  li div:nth-of-type(3) p:last-of-type{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  li a{
    display: block;
    width: 0.40rem;
    line-height: 0.2rem;
    border: 1px solid #ff2741;
    color: #ff2741;
    border-radius: 2px;
    height: 0.2rem;
    text-align: center;
  }
</style>
